<html>
    <head>
        <title>
            利用json实现动态表格数据
        </title>
    </head>
    <body>
        <h1>用户信息管理</h1>
        <p>
            <table border="1">
                <thead>
                    <tr>
                        <td>用户名</td>
                        <td>姓名</td>
                        <td>性别</td>
                    </tr>
                </thead>
                <tbody id="tbody">
                    
                </tbody>
            </table>
        </p>
        <p><h2>新增用户</h2></p>
        <br>用户名：<input type="text" id="username">
        <br>姓名：<input type="text" id="realname">
        <br>性别：<input type="text" id="gender">
        <br><input type="button" value="保存" onclick="add()">
    </body>
</html>
<script>
    //定义存放所有用户数据的json数组
    var userList=[
        {
            "username":"admin","realname":"魏大侠","gender":"男"
        }
    ];
    function loadData(){
    //定义将用户数组userList中的元素加载到表格中
    var objTbody=document.getElementById("tbody");
    objTbody.innerHTML="";//清空上一次内容
    for(var i=0;i<userList.length;i++){
        //每个元素对应向表格中的tbody增加一行tr
        objTbody.innerHTML+="<tr>"+"<td>"+userList[i].username+"</td>"+"<td>"+userList[i].realname+"</td>"+"<td>"+userList[i].gender+"</td>"+"<td><input type=\"button\" value=\"删除\" onclick=\"del("+i+")\"></td>"+"</tr>";
    }
}
    loadData();

    //将用户输入的数据，增加到表格中
    function add(){
        //1.获得用户的输入
        var username=document.getElementById("username").value;
        var realname=document.getElementById("realname").value;
        var gender=document.getElementById("gender").value;
        //2.增加一个json数据到用户数组userList中
        var user={
            "username":username,
            "realname":realname,
            "gender":gender
        };
        userList.push(user);//将用户对象追加到数组中
        //2.重新加载数据到表格中
        loadData();
    }
    function del(i){
        //1.从数组userList去掉第i个位置的元素
        userList.splice(i);
        //2.重新加载到表格中
        loadData();
    }
</script>